<template>
    <a-row>
        <div class="left">
            <BorderBox10 class="border-box">
                <LeftTopBarComp></LeftTopBarComp>
            </BorderBox10>
            <BorderBox10 class="border-box" style="margin: 10px 0">
                <LeftCenterBar></LeftCenterBar>
            </BorderBox10>
            <BorderBox10 class="border-box">
                <LeftBottomBarComp></LeftBottomBarComp>
            </BorderBox10>
        </div>
        <div class="center">
            <BorderBox10 class="border-box" style="width: 100%">
                <CenterBarComp></CenterBarComp>
            </BorderBox10>
            <a-row style="margin-top: 10px; width: 100%">
                <BorderBox10 class="border-box" style="width: 505px; margin-right: 10px">
                    <BottomLeftBarComp></BottomLeftBarComp
                ></BorderBox10>
                <BorderBox10 class="border-box" style="width: 505px">
                    <BottomRightBarComp></BottomRightBarComp
                ></BorderBox10>
            </a-row>
        </div>
        <div class="right">
            <BorderBox10 class="border-box">
                <RightTopBarComp></RightTopBarComp>
            </BorderBox10>
            <BorderBox10 class="border-box" style="margin: 10px 0">
                <RightCenterBarComp></RightCenterBarComp>
            </BorderBox10>
            <BorderBox10 class="border-box">
                <RightBottomBarComp></RightBottomBarComp>
            </BorderBox10>
        </div>
    </a-row>
</template>
<script>
import { defineComponent } from 'vue'
import { BorderBox10 } from '@kjgl77/datav-vue3'

import LeftTopBarComp from './comps/left-top-bar/index.vue'
import LeftCenterBar from './comps/left-center-bar/index.vue'
import LeftBottomBarComp from './comps/left-bottom-bar/index.vue'
import CenterBarComp from './comps/center-bar/index.vue'
import BottomRightBarComp from './comps/bottom-right-bar/index.vue'
import BottomLeftBarComp from './comps/bottom-left-bar/index.vue'
import RightTopBarComp from './comps/right-top-bar/index.vue'
import RightCenterBarComp from './comps/right-center-bar/index.vue'
import RightBottomBarComp from './comps/right-bottom-bar/index.vue'

export default defineComponent({
    name: 'Distribute',
    components: {
        BorderBox10,

        CenterBarComp,
        BottomRightBarComp,
        BottomLeftBarComp,
        LeftTopBarComp,
        LeftCenterBar,
        LeftBottomBarComp,
        RightTopBarComp,
        RightCenterBarComp,
        RightBottomBarComp
    },
    setup() {
        return {}
    }
})
</script>
<style lang="scss" scoped>
.left,
.right {
    width: 420px;
    height: 100%;
}
.center {
    height: 100%;
    flex: 1;
    padding: 0 10px;
}
.border-box {
    padding: 10px;
}
</style>
